<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/constant.js"></script>
</head>
<body>
<div class="container">
  <div class="options">
    <input type="text" class="input-area" id="stock" value="000001"/>
    <button class="detail-button" onclick="analyse()">分析该股票</button>
    <button class="tts-button" id="tts-button" onclick="playAudio()">语音播报</button>
  </div>
  <div>
    <audio id="audioPlayer" controls style="display: none">
      <source src="your-audio-file.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
  <div class="txt">
    <textarea id="analysis-area">
      这里是股票分析
    </textarea>
  </div>
</div>
</body>
<script>
  $(function() {
    $("#tts-button").prop("disabled", true)
  });
  function analyse() {
    let stock = $("#stock").val()
    $.ajax({
      url: host + "/api/test",
      type: "get",
      data: {
        stock_code: stock,
      },
      success: function (res) {
        console.log(res)
        let analysis = res.analysis
        $("#analysis-area").val(analysis)

        $.ajax({
          url: host + "/api/stock/tts",
          type: "post",
          data: {
            text: analysis,
          },
          success: function (res) {
            console.log(res)
            $("#audioPlayer").attr("src", `${host}/${res.url}`)
            $("#tts-button").prop("disabled", false)
          }
        })

      }
    })
  }

  function playAudio() {
    $('#audioPlayer')[0].play();
  }

</script>
</html>